<template>
  <div class="app-container">
    <el-menu :default-active="activeIndex" class='addMenu' mode="horizontal"
             @select="handleSelect"
             style="margin-bottom: 10px;"
    >
      <el-menu-item index="1">白名单</el-menu-item>
      <el-menu-item index="2">检查记录</el-menu-item>
      <el-menu-item index="3">检查计划</el-menu-item>
    </el-menu>
    <!--工具栏-->
    <div class="head-container">
      <eHeader :permission="permission" />
      <crudOperation :permission="permission" :async="true">
      </crudOperation>
    </div>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" border :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
      <!--<el-table-column type="selection" width="55" />-->
      <el-table-column prop="creditCode" label="被检查企业社会信用代码" width="180px" :resizable="false"/>
      <el-table-column prop="enterpriseName" label="被检查企业名称" width="120px" :resizable="false"/>
      <el-table-column prop="inspectDate" label="实际检查日期" :formatter="formatDate" :resizable="false"/>
      <el-table-column prop="inspectType" label="检查类型" :resizable="false"/>
      
      <el-table-column prop="inspectDept1" label="检查单位1" :resizable="false"/>
      <el-table-column prop="inspectItems1" label="检查事项1" :resizable="false"/>
      <el-table-column prop="inspectOpinion1" label="检查意见1" :resizable="false"/>

      <el-table-column prop="inspectDept2" label="检查单位2" :resizable="false"/>
      <el-table-column prop="inspectItems2" label="检查事项2" :resizable="false"/>
      <el-table-column prop="inspectOpinion2" label="检查意见2" :resizable="false"/>

      <!--   编辑与删除   -->
      <el-table-column
        label="操作"
        width="250px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
            async
          >
            <el-button slot="left" class="option-item" size="mini" type="primary" plain icon="el-icon-view"  title="查看"  @click="doView(scope.row.id)" />
          </udOperation>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import crudRecord from '@/api/business/synthesis/record'
import eHeader from './module/header'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
const addPageUrl = '/business/synthesis/record/add';
const editPageUrl = '/business/synthesis/record/edit';
export default {
  name: 'RecordsList',

  components: { eHeader, crudOperation, pagination, udOperation },
  cruds() {
    return CRUD({
      title: '联合检查记录',
      url: 'business/zhcyc/queryPage',
      crudMethod: { ...crudRecord },
      addPage: true,
      addPageUrl: addPageUrl,
      editPage: true,
      editPageUrl: editPageUrl,
      editParams: ['id'],
      optShow: {
        add: true,
        edit: false,
        del: false,
        reset:true
      },
      query: {
        status:0
      }
    })
  },

  mixins: [presenter()],
  // 数据字典

  data() {
    return {
      permission: {
        add: [],
        edit: [],
        del: [],
        info: []
      },
      id: null,
      dialogFormVisible: false,
      form: {
        departmentId: null,
        id: null,
      },
      activeIndex: '2'
    }
  },

  created() {
    console.log(this.permission, 'permission')
  },

  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      switch (key) {
        case '1': 
          this.$router.push('/business/synthesis/whitelist')
          break;
        case '2': 
          this.$router.push('/business/synthesis/record')
          break;
        case '3': 
          this.$router.push('/business/synthesis/plan')
          break;
      }
    },
    doView(id) {
      console.log(id, 'id')
      this.$router.push('/business/synthesis/record/detail/' + id)
    },
    addPlan() {
      this.$router.push('/business/synthesis/record/add')
    },
    onChangeStatus (record) {
      console.log('record : ', record)
    },
    formatDate(row, column) {
      const date = new Date(row.inspectDate);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
 ::v-deep .svg-icon {
   vertical-align: middle;
 }
 /* Tooltip 文本 */
 .tooltip .tooltiptext {
   visibility: hidden;
   width: 40px;
   background-color: #666;
   color: #fff;
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;

   /* 定位 */
   position: absolute;
   z-index: 1;
   right: 28px;
   top: 0;
 }

 /* 鼠标移动上去后显示提示框 */
 .tooltip:hover .tooltiptext {
   visibility: visible;
 }
</style>

<style>
 .el-table th.el-table__cell > .cell{
  text-align: center;
  color: black
 }
</style>